<template>
	<view>
		<view class="comment-content" v-for="item,index in commentsList" :key="index">
			<comment-box :comments="item" @reply="reply"></comment-box>
		</view>
		<!-- 加载 -->
		<uni-load-more :status="load" iconType="snow"></uni-load-more>
		<!-- 弹出层 -->
		<uni-popup type="bottom" ref="popup" :maskClick="false">
			<view class="popup-wrapper">
				<view class="popup-header">
					<text class="popup-header__item" @click="popupClose">取消</text>
					<text class="popup-header__item" @click="submitComment">发布</text>
				</view>
				<view class="popup-content">
					<textarea class="popup-textarea" v-model="commentsVal" placeholder="请输入评论内容" fixed maxlength="200" />
					<view class="popup-count">{{commentsVal.length}}/200</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		get_comments,
		update_comment
	} from '@/common/api/index.js'
	export default {
		data() {
			return {
				// 文章Id
				article_id: '',
				// 查询参数对象
				query: {
					pageSize: 5,
					page: 1
				},
				// 加载状态
				load: 'more',
				// 评论内容的值
				commentsVal: '',
				// 评论信息数据数组
				commentsList: [],
				// 回复评论相关信息对象
				replyFormData: {}
			}
		},
		onLoad(params) {
			// 获取 id 参数
			this.article_id = params.id
			// 调用请求
			this.getComments(this.article_id)
		},
		// 触底生命周期函数
		onReachBottom() {
			// 判断数据是非全部加载完成
			if (this.load !== 'noMore') {
				this.query.page ++
				// 调用请求
				this.getComments(this.article_id)
			}
			
		},
		methods: {
			// 获取评论
			getComments(article_id) {
				// 加载中
				this.load = 'loading'
				get_comments({
					article_id,
					pageSize: this.query.pageSize,
					page: this.query.page
				})
				.then(res => {
					// 加载更多
					this.load = 'more'
					
					// 判断数据是否小于0条
					if (res.data.length === 0) {
						// 没有更多数据
						return this.load = 'noMore'
						// 判断数据是否小于5条
					} else if (res.data.length < 5) {
						// 没有更多数据
						this.load = 'noMore'
					}
					
					// 简单的对象复制
					let oldData = JSON.parse(JSON.stringify(this.commentsList))
					// let oldData = this.commentsList || [] 第二种方法
					oldData.push(...res.data)
					this.commentsList = oldData
					
				})
				.catch(err => {
					// 加载更多
					this.load = 'more'
				})
			},
			// 打开评论框
			openComment() {
				this.$refs.popup.open()
			},
			// 关闭评论框
			popupClose() {
				// 关闭popup
				this.$refs.popup.close()
			},
			// 评论请求
			setUpdateComment() {
				this.commentsList = []
				update_comment({
					article_id: this.article_id,  //文章id
					content: this.commentsVal  ,//评论内容
					comment_id: this.replyFormData.comment_id ,//评论id
					replay_id: this.replyFormData.replay_id, //子回复id
					is_reply: this.replyFormData.is_reply //是否子回复
				})
				.then(res => {
					console.log('评论：',res)
					uni.showToast({
						title: '评论成功！'
					})
					// 刷新评论
					this.getComments(this.article_id)
					// 清空文本域
					this.commentsVal = ''
					// 清空
					this.replyFormData = {}
					// 关闭popup
					this.popupClose()
				})
				.catch(err => {
					uni.showToast({
						title: '评论失败：' + err,
						icon: 'none'
					})
				})
			},
			// 提交评论
			submitComment() {
				if(!this.commentsVal) return uni.showToast({
					title: '请输入评论内容',
					icon: 'none'
				})
				console.log('发布')
				// 调用评论函数
				this.setUpdateComment()
			},
			// 回复评论
			reply(e) {
				// console.log(e)
				this.replyFormData = {
					comment_id: e.comments.comment_id,
					is_reply: e.is_reply
				}
				if(e.comments.replay_id) {
					this.replyFormData.replay_id = e.comments.replay_id
				}
				// 打开popup
				this.openComment()
				
				console.log(this.replyFormData)
			},
		}
	}
</script>

<style lang="scss">
	.comment-content{
		padding: 0 30upx;
	}
	
	.popup-wrapper{
		background-color: #fff;
		.popup-header{
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			color: #666;
			border-bottom: 1px solid #F5F5F5;
			.popup-header__item{
				height: 100upx;
				line-height: 100upx;
				padding: 0 30upx;
			}
		}
		.popup-content{
			width: 100%;
			padding: 30upx;
			box-sizing: border-box;
			.popup-textarea{
				width: 100%;
				height: 400upx;
			}
			.popup-count{
				display: flex;
				justify-content: flex-end;
				font-size: 24upx;
				color: #999;
			}
		}
	}
</style>
